body,html{
    width: 100%;
    height: 100%;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}

._search{
    width: 100%;
    .px2rem(height, 90);
    background: #fb8876;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p:nth-child(2){
        width: 70%;
        .px2rem(height, 60);
        background: #fc9c8e;
        .px2rem(border-radius, 30);
        input{
            width: 100%;
            height: 100%;
            border: none;
            background: url(../imges/wode/tp31.png) no-repeat 30px center;
        }
    }
    p:nth-child(1){
        img{
            .px2rem(width, 17);
            .px2rem(height, 28);
            .px2rem(padding-left, 22);
        }
    }
    p:nth-child(3){
        img{
            .px2rem(width, 55);
            .px2rem(height, 54);
            .px2rem(padding-right, 22);
        }
    }
}
._key{
    display: none;
    width: 100%;
    .px2rem(height, 436);
    background: #3b3a35;
    position: fixed;
    left: 0;
    bottom: 0;
    ul{
        .px2rem(height, 108);
        display: flex;
        justify-content: center;
        align-items: center;
        li{
            img{
                .px2rem(width, 67);
                .px2rem(height, 89);
                .px2rem(padding-left, 5);
                .px2rem(padding-right, 4);
            }
        }
    }
    ul:nth-child(3){
        li:nth-child(1){
            img{
                .px2rem(width, 88);
                .px2rem(height, 89);
                .px2rem(padding-right, 16);
            }
        }
        li:last-child{
            img{
                .px2rem(width, 88);
                .px2rem(height, 89);
                .px2rem(padding-leftt, 16);
            }
        }
    }
    ul:nth-child(4){
        li:first-child{
            img{
                .px2rem(width, 88);
                .px2rem(height, 89);
            }
        }
        li:nth-child(2){
            img{
                .px2rem(width, 88);
                .px2rem(height, 89);
            }
        }
        li:nth-child(3){
            img{
                .px2rem(width, 67);
                .px2rem(height, 89);
            }
        }
        li:nth-child(4){
            img{
                .px2rem(width, 293);
                .px2rem(height, 89);
            }
        }
        li:last-child{
            img{
                .px2rem(width, 179);
                .px2rem(height, 89);
            }
        }
    }
}
